<template>
	<view class="pagebox">
		<div class="q_tip">
			<p class="rpx28 app_col">* Q27-1.<text class="rpx28 col282">堆头/端架/冰爽站：记录可口可乐公司汽水品类的包装类型面积（平方米）：</text></p>
		</div>
		<div class="size">
			<div class="s_it" v-for="(it,ind) in size[select]" :key="ind">
				<p class="rpx28 col666">{{it.name}}</p>
				<input class="q_number rpx328 col3A4060" @input="inputValue($event,ind)" type="number" cursor-spacing="10" :value="it.val" placeholder="陈列面积" placeholder-class="rpx28 colB3B" />
			</div>
		</div>

		<div style="height: 222upx;"></div>
		<div class="but88box">
			<navigator @click="toNext" class="but88 rpx32 colfff app_bg">下一步</navigator>
		</div>
		
		<uni-popup class="u_p" :show="type === 'center'" position="middle" mode="fixed" msg="" @hidePopup="togglePopup('')" >
			<div class="show_up">
				<img class="lx_img" src="static/s4.png" />
				<div class="lx_title">
					<p class="rpx28 app_col omit2">* Q28.<text class="rpx28 col282">请查看该店铺是否还有其他二次陈列？</text></p>
				</div>
				<div class="lx_but">
					<navigator class="rpx34 colfff">无</navigator>
					<navigator class="rpx34 colfff app_bg">有</navigator>
				</div>
			</div>
		</uni-popup>
		
	</view>
</template>
<script>
	import mixins from '@/mixins'
	import ntfy from '../../components/ntfy/index.vue';
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	export default {
		// mixins: [mixins],
		components:{ntfy,uniPopup/*,uniCollapse,uniCollapseItem*/},
		data() {
			return {
				type: '',
				size: [[
					{name:'1）小支装多支装：<＝680毫升多支装',val:''},
					{name:'2）小支装单支装：<＝680毫升多支装',val:''},
					{name:'3）大支装>680毫升单支装或者多支装（包装跨品类）',val:''},
				]],
				//question:[],
				shopId:0,
				catId:0,
				select:0
			}
		},
		onBackPress() {
			if (this.type !== '') {
				this.type = '';
				return true;
			}
		},
		onLoad(e) {
			let _that = this;
			_that.shopId = e.shopId;
			_that.catId = e.catId;
			_that.select = e.select;
			uni.getStorage({
				key:'shopId-'+_that.shopId,
				success:res=>{
					if(res.data.sel[24].sel_data){
						//_that.question = res.data.sel
						_that.size = res.data.sel[24].sel_data
					}else{
						uni.getStorage({
							key:'question',
							success:res=>{
								//_that.question = res.data;
								//_that.size.push(res.data[24].item)
							}
						})
					}
				},
				fail:res=>{
					
				}
			})
			//处理循环添加数据
			if((+this.select+1)!= this.size.length){
			uni.getStorage({//Q27-1
				key: "question",
				success: res => {
					this.size.push([
						{name:'1）小支装多支装：<＝680毫升多支装',val:''},
						{name:'2）小支装单支装：<＝680毫升多支装',val:''},
						{name:'3）大支装>680毫升单支装或者多支装（包装跨品类）',val:''},
					])
					//this.size.push(res.data[24].item)
				}
			})
			}
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			},
			inputValue(e,index){
				this.size[this.select][index].val = e.detail.value
			},
			toNext(){
				//保存数据
				let _that = this
				//_that.question[24].item = _that.size
				
				uni.getStorage({
					key:'shopId-'+_that.shopId,
					success:res=>{
						res.data.sel[24].sel_data = _that.size
						uni.setStorage({
							key:'shopId-'+_that.shopId,
							data:res.data
						})
					},
				})
				mixins.navigate('q27_2?shopId='+this.shopId+'&catId='+this.catId+'&select='+this.select);
			}
		}
	}
</script>

<style scoped>
	.size{background: #fff;border-top: 1px solid #DCDCDC;border-bottom: 1px solid #DCDCDC;padding: 34upx 0 24upx;}
	.s_it{margin: 0 47upx 60upx 47upx;}
	.s_it p{margin-bottom: 30upx;line-height: 48upx;}
	
	.q_number{text-align: center;width:128upx;height:60upx;background:rgba(234,234,234,1);border-radius:4upx;display: flex;align-items: center;justify-content: center;margin-left: 29upx;}
	
	.but88box{position: fixed;width: 100%;bottom: 0;background: #F7F7F7;}	
	.but88{margin: 40upx 32upx 102upx;height: 80upx;width:unset;}
	
	.u_p >>> .uni-popup{height: unset !important;border-radius:8upx;padding: 0;}
</style>